<script setup>
  import { onMounted, ref } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'
  import { http } from '@/utils/http.js'

  const listType = ref(1)
  const history = ref([])
  const currentPage = ref(1)
  async function getHistoryList() {
    const res = await http.request({
      url: '/api/user/footPrint',
      method: 'POST',
      data: {
        page: currentPage.value,
        limit: 10,
        type: listType.value,
      },
    })
    history.value = [...history.value, ...res.data]
  }

  async function clearAll() {
    const res = await http.request({
      url: '/api/user/clearFootPrint',
      method: 'POST',
      data: {},
    })
    if (res.st == 1) {
      uni.utils.toast('清除成功')
      listType.value = 1
      currentPage.value = 1
      history.value = []
      getHistoryList()
    } else {
      uni.utils.toast(res.msg)
    }
  }

  function changeList(index) {
    history.value = []
    currentPage.value = 1
    listType.value = index
    getHistoryList()
  }

  //跳转购买
  function goBuy(item) {
    if (item.type == 1) {
      uni.navigateTo({
        url: `/homePage/goodsinfo/index?id=${item.goods_id}`,
      })
    } else if (item.type == 2) {
      uni.navigateTo({
        url: `/drawPage/wxDraw/index?id=${item.box_id}`,
      })
    } else if (item.type == 3) {
      uni.navigateTo({
        url: `/drawPage/txDraw/index?id=${item.box_id}`,
      })
    } else if (item.type == 4) {
      uni.navigateTo({
        url: `/drawPage/treasureDraw/index?id=${item.box_id}`,
      })
    }
  }

  function refresh() {
    ++currentPage.value
    getHistoryList()
  }

  onMounted(() => {
    getHistoryList()
  })
</script>

<template>
  <view class="bar"> </view>
  <view class="history-content">
    <view class="history-content-top">
      <scroll-view scroll-x="true" style="width: 73vw">
        <view class="top-left">
          <view :class="{ active: listType == 1 }" @click="changeList(1)">
            商城
          </view>
          <view :class="{ active: listType == 2 }" @click="changeList(2)">
            无限赏
          </view>
          <view :class="{ active: listType == 3 }" @click="changeList(3)">
            天选之人
          </view>
          <view :class="{ active: listType == 4 }" @click="changeList(4)">
            欧皇寻宝
          </view>
        </view>
      </scroll-view>
      <view class="top-right" @click="clearAll">
        <image
          style="width: 112rpx; height: 34rpx"
          src="../../static/clear.png"
          mode=""
        ></image>
      </view>
    </view>
    <scroll-view
      scroll-y="true"
      class="scroll-Y"
      style="height: 89vh"
      @scrolltolower="refresh"
    >
      <view class="history-content-list">
        <view
          @click="goBuy(item)"
          class="history-item"
          v-for="(item, index) in history"
          :key="'history' + item.id"
        >
          <view class="item-img">
            <image
              v-if="item.type == 1"
              style="width: 200rpx; height: 200rpx"
              :src="item.goods_img"
              mode="heightFix"
            ></image>
            <image
              v-else
              style="width: 200rpx; height: 200rpx"
              :src="item.box_img"
              mode="heightFix"
            ></image>
          </view>
          <view class="item-right">
            <view class="item-right-top">
              <view
                v-if="item.type == 1"
                class=""
                style="
                  margin-bottom: 26rpx;
                  font-size: 28rpx;
                  font-weight: 600;
                  color: #3d3d3d;
                "
              >
                {{ item.goods_name }}
              </view>
              <view
                v-else
                class=""
                style="margin-bottom: 26rpx; font-size: 28rpx"
              >
                {{ item.box_name }}
              </view>
              <view
                v-if="item.type == 1"
                class=""
                style="font-size: 24rpx; color: #9b9b9d"
              >
                {{ item.spec }}
              </view>
            </view>

            <view class="item-right-bottom">
              <view
                style="font-size: 22rpx; color: #ff4444"
                v-if="item.type == 1 && item.is_integral == 0"
                >￥{{ item.goods_price }}</view
              >
              <view
                style="font-size: 22rpx; color: #f58300"
                v-else-if="item.type == 1 && item.is_integral == 1"
                >积分 {{ item.integral }}</view
              >
              <view style="font-size: 22rpx; color: #f58300" v-else
                >￥{{ item.box_price }}</view
              >
              <view class="buy-again"> 去购买> </view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<style lang="scss" scoped>
  .bar {
    height: 20rpx;
    background-color: #f5f5f5;
  }
  .history-content {
    padding: 20rpx;
    .history-content-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 36rpx;
      .top-left {
        display: flex;
        align-items: center;
        flex-shrink: 0;
        view {
          flex-shrink: 0;
          width: 156rpx;
          height: 48rpx;
          margin-right: 22rpx;
          box-sizing: border-box;
          border-radius: 24rpx;
          background-color: #f7f7f7;
          text-align: center;
          line-height: 48rpx;
          font-size: 24rpx;
        }
        .active {
          background-color: $all-color;
          color: #3d3d3d;
          font-weight: 600;
        }
      }
    }
    .history-content-list {
      .history-item {
        display: flex;
        align-items: center;
        margin-bottom: 42rpx;
        .item-img {
          width: 200rpx;
          height: 200rpx;
          margin-right: 22rpx;
          box-sizing: border-box;
          border-radius: 8rpx;
          overflow: hidden;
          flex-shrink: 0;
        }
        .item-right {
          width: 100%;
          height: 200rpx;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .item-right-bottom {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .buy-again {
              width: 126rpx;
              height: 44rpx;
              border-radius: 22rpx;
              background-color: $all-color;
              font-size: 22rpx;
              color: #3d3d3d;
              font-weight: 600;
              line-height: 44rpx;
              text-align: center;
            }
          }
        }
      }
    }
  }
</style>
